<template>
  <view class="detail-container">
    <!-- 新闻标题 -->
    <view class="news-title">{{ detail.title }}</view>
    
    <!-- 新闻元信息 -->
    <view class="news-meta">
		<text class="meta-item">热度: {{ detail.hot }}</text>
      <text class="meta-item">{{ detail.date }}</text>
      
    </view>
    
    <!-- 新闻内容 -->
    <view class="news-content">
      {{ detail.content }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref  } from 'vue'
declare const uni: any;
const detail = ref({
  title: '',
  hot: '',
  date: '',
  cover: '',
  content: ''
})

function goBack() {
  uni.navigateBack()
}

onLoad((options) => {
  const nid = options.nid
  fetchDetail(nid)
})

function fetchDetail(nid: string|number) {
  const token = uni.getStorageSync('token')
  uni.request({
    url: 'http://localhost:3010/news/detail',
    method: 'POST',
    header: {
      'Authorization': 'Bearer ' + token,
      'content-type': 'application/x-www-form-urlencoded'
    },
    data: { nid },
    success: (res) => {
	const formatISODate = (isoString: string): string => {
	         if (!isoString) return '';
	         const date = new Date(isoString);
	         return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
	       };
      if (res.data && res.data.data) {
        const d = res.data.data
        detail.value = {
          title: d.title,
          hot: d.hot,
          date: d.create_time ?formatISODate(d.create_time) : '',
          cover: d.cover ? (d.cover.startsWith('http') ? d.cover : 'http://localhost:3010' + d.cover) : '',
          content: d.content
        }
      }
    }
  })
}
</script>
<style scoped>
.detail-container {
  padding: 30rpx;
  background-color: #fff;
  min-height: 100vh;
}

.news-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  color: #999;
  font-size: 28rpx;
}

.cover-image {
  width: 100%;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
}

.news-content {
  font-size: 32rpx;
  line-height: 1.8;
  color: #333;
}
</style>